import React from 'react';
import {
  StyleSheet, View,
} from 'react-native';

import { Icon, Text } from 'native-base';

const MyIcon = ({
  name, color, text, hasText,
}) => (
  <View style={styles.container}>
    <Icon
      type="MaterialIcons"
      name={name}
      style={{ color }}
    />
    { hasText && (<Text style={{ color, fontSize: 11 }}>{text}</Text>) }
  </View>
);

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default MyIcon;
